<template>
  <el-dialog :title="'属性（'+form.productName+'）'" :visible.sync="dialogVisible" width="60%">
    <div v-if="flag!=1" style="margin: 10px 0">
      <el-button type="primary" plain @click="updateRow(0,{})">新增</el-button>
    </div>
    <el-table
      :data="skuList"
      max-height="500"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" align="center" width="50">
      </el-table-column>
      <el-table-column prop="attributeName" label="属性名称" align="center"/>
      <el-table-column prop="attributeKey" label='属性编码' align="center" width="100"/>
      <el-table-column prop="attributeType" label='属性类型' align="center" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_attr_type" :value="scope.row.attributeType"/>
        </template>
      </el-table-column>
      <el-table-column prop="unit" label='单位' align="center" width="100"/>
      <el-table-column prop="isMust" label='是否必选' align="center" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isMust"/>
        </template>
      </el-table-column>
      <el-table-column prop="isPrice" label='定价元素' align="center" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isPrice"/>
        </template>
      </el-table-column>
      <el-table-column prop="skuValueList" label='属性值' align="center">
        <template slot-scope="scope">
          <div v-for="val in scope.row.skuValueList">{{ val.value }}；</div>
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label='显示排序' align="center" width="80"/>
      <el-table-column prop="name" label="操作" align="center" width="100" v-if="flag!=1">
        <template slot-scope="scope">
          <el-button type="text" @click="updateRow(2,scope.row)">修改</el-button>
          <el-button type="text" @click="updateRow(3,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible=false">取 消</el-button>
    </div>
    <addSkuDialog ref="addSkuDialog" @ok="load()"></addSkuDialog>
  </el-dialog>
</template>

<script>
import {deleteGoodAttr, listGoodAttr} from "../../../api/goodMng";
import addSkuDialog from "./addSkuDialog.vue";

export default {
  dicts: ['sys_yes_no', 'sys_attr_type'],
  components: {addSkuDialog},
  data() {
    return {
      flag: 0,
      loading: false,
      dialogVisible: false,
      list: [],
      form: {},
      skuList: []
    }
  },
  methods: {
    show(form) {
      this.dialogVisible = true
      this.skuList = []
      this.form = form
      this.load()
    },
    load() {
      this.loading = true
      listGoodAttr({productId: this.form.id}).then(res => {
        this.skuList = res.data
      }).finally(e => {
        this.loading = false
      })
    },
    updateRow(flag, row) {
      let form = JSON.parse(JSON.stringify(row))
      form.productId = this.form.id
      if (flag != 3) {
        this.$refs.addSkuDialog.show(flag, form)
      }
      if (flag == 3) {
        this.$modal.confirm('是否确定删除').then(() => {
          deleteGoodAttr(form.id).then(res => {
            this.load()
            this.$message.success('删除成功')
          })
        })
      }
    }
  }
}
</script>
